<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/2/5 0005
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="utf-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <title>闲置商品</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/static/taoshunda/share/css/common.css"/>
    <style type="text/css">
        body {
            background: #f0eff7;
        }
    </style>
    <style>
        #one {
            background-color: white;
            width: 100%;
            border-radius: 5px;
        }

        #two {
            background-color: white;
            width: 100%;
            height: 73%;
            border-radius: 5px;
            margin-top: 2%
        }

        #three {
            background-color: #F0F0F0;
            width: 100%;
            height: 2%;
        }

        .characters {
            font-family: 黑体, 简体;
            font-size: 1.5em;
        }

        .tilte {
            font-size: 1.5em;
        }

        .img {
            width: 100%;
        }

        #price {
            font-size: 14px;
            color: #FF6D13;
        }

        #oldPrice {
            color: #D8D8D8;
            font-size: 14px;
            text-decoration: line-through;
        }

        .flexBox {
            display: flex;
            display: -webkit-flex;
        }

        .clFlexBox {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
        }

        .flex1 {
            flex: 1;
            -webkit-flex: 1;
        }

        .img-cont {
            width: 120px;
            height: 120px;
        }

        .img-hidden {
            border-radius: 8px;
            width: 100px;
            height: 100px;
            overflow: hidden;
            margin: 10px;
            text-align: center;
        }

        .img-hidden img {
            min-width: 100%;
            min-height: 100%;
            margin: 0 auto;
        }

        .img {
            margin-bottom: 2px;
        }

    </style>
</head>
<body>
<div id="one">
    <div class="flexBox">
        <div class="img-cont">
            <div class="img-hidden">
                <img src="http://www.taoshunda.com/images/${map.onePic}"/>
            </div>
        </div>
        <div class="flex1">
            <div style="padding: 10px 10px  10px 0;height: 100px;" class="clFlexBox">
                <div class="col-xs-2 flex1">
                    <ul style="font-size: 16px" class="characters">${map.name}</ul>
                </div>
                <div class="flexBox">
                    <div class="flex1" style="font-size: 14px;color: #FF6D13;">
                        <div id="price">￥${map.newPrice}</div>
                        <div id="oldPrice">原价：￥${map.oldPrice}</div>
                    </div>
                    <div style="line-height: 40px;">
                        <span style="color:#B8B8B8;font-size: 15px;">${map.address}</span>
                    </div>
                </div>
                <%--<div style="color: #D8D8D8;font-size: 14px;text-decoration:line-through;margin-left: 8%">--%>
                <%--</div>--%>
            </div>
        </div>
    </div>
</div>
<script>
    var senterCut = function (node) {
        var W = node.naturalWidth;
        var H = node.naturalHeight;
        var PW = node.parentNode.clientWidth;
        var PH = node.parentNode.clientHeight;
        var RET = W / H;
        var PRET = PW / PH;
        if (RET == PRET) {
            node.width = PW + 'px';
            node.height = PH + 'px';
        } else {
            if (RET > PRET) {
                node.style.height = PH + 'px';
                node.style.width = W * PH / H + 'px';
                node.style.marginLeft = (PW - W * PH / H) / 2 + 'px';
            } else {
                node.style.width = PW + 'px';
                node.style.height = H * PW / W + 'px';
                node.style.marginTop = (PH - H * PW / W)  / 2 + 'px';
            }
        }
    }

    $('.img-hidden img').on('load', function () {
        senterCut(this);
    });

</script>

<div id="three">

</div>

<div style="padding: 5px 10px;background: #FFF;line-height: 30px;">
    <span class="">商品详情</span>
</div>
<div style="height: 1px;background-color: #dbdbdb;margin-left: 10px;width: 100%"></div>
<%--<div style="background-color: #F0F0F0;width: 100%;height: 0.1%;margin-top: 2%">--%>

<%--</div>--%>
<div style="background-color: #FFF">
    <div style="padding: 5px 10px 10px 10px;">
        <div style="font-size: 14px;margin-top:10px;">${map.sunmmary}</div>
    </div>
    <div>
        <c:forEach items="${map.idlePic}" var="image">
            <img src="http://www.taoshunda.com/images/${image}" class="img">
        </c:forEach>
    </div>
</div>
<div style="padding: 5px 10px 60px 10px;background-color: #fefefe" class="flexBox">
    <div class="flex1" style="font-size: 15px; padding: 5px;">
          <span style="color: orange">
            闲置物品安全交易提示：<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尊敬的淘瞬达用户您好，为了您的资金安全，请见面交易，切勿提前支付任何费用，谨防上当受骗！</p>
    </span>
    </div>
    <div style="width: 60px;padding: 20px 10px;">
        <img src="${path}/static/taoshunda/share/images/img_jingshi.png" width="60px">
    </div>

</div>
<div style="background: #FF6D13;line-height:50px;text-align: center;display: inline-block;position: fixed;bottom: 0;width: 100%;font-size: 16px;left:0;">
    <a href="http://www.taoshunda.com/setup/user.html" style="color: #ffffff;">点击下载淘瞬达app，淘您所爱 一瞬即达</a>
</div>

</body>
</html>
